<template>
  <div class="personalHome">
    <el-tabs v-model="tabsName">
      <!-- 集结流程介绍 -->
      <el-tab-pane name="0">
        <span slot="label"><i class="el-icon-user"></i>集结流程介绍</span>
        <div class="borderSingle singlePadding">
          <h4>集结流程图</h4>
          <el-image :src="require('../../assets/singleprocess.jpg')" style="pointer-events: none;user-select:none;margin:0,auto;max-width: 100%;  max-height: 80%;"></el-image>
        </div>
        <div class="borderSingle singlePadding">
          <h4>集结流程介绍</h4>
          <ol>
            <li v-for="item in ProcessIntroduction" :key="item">{{item.label}}:{{item.content}}</li>
          </ol>
            
        </div>
        <div class="singlePadding btnCenter"><el-button type="primary" @click="next">下一步</el-button></div>
      </el-tab-pane>
      
      <!-- 导入数据 -->
      <el-tab-pane name="1">
        <span slot="label"><i class="el-icon-user"></i> 数据</span>
        <div class="borderSingle singlePadding">
          <h5>导入数据</h5>
          <el-form ref="form" :model="aggregateForm" label-width="80px">
            <el-form-item label="导入数据">
              <el-radio-group v-model="radio1" size="medium">
                <el-radio-button label="手动输入数据"></el-radio-button>
                <el-radio-button label="从Excel中导入数据"></el-radio-button>
                <el-radio-button label="从大数据中导入数据(暂未开发)" disabled></el-radio-button>
              </el-radio-group>
            </el-form-item>
            <el-form-item v-if="radio1 == '手动输入数据'">
              <el-input
                style="width:600px;"
                type="textarea" :autosize="{ minRows: 5, maxRows: 5}" placeholder="请输入内容"
                v-model="aggregateForm.importData">
              </el-input>
            </el-form-item>
            <el-form-item v-if="radio1 == '从Excel中导入数据'">
              <el-upload
                name="excel" action="http://127.0.0.1:8000/api/excel"
                :limit="1" :drag='true' :show-file-list='true' :auto-upload='true'
                :before-upload="beforeUpload" :on-exceed="handleExceed" :on-success="uploadSuccess" :on-error="uploadFalse">
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
              </el-upload>
            </el-form-item>
          </el-form>
        </div>
        <div class="singlePadding btnCenter"><el-button type="primary" @click="next">下一步</el-button></div>
      </el-tab-pane>

      <!-- 集结算子 -->
      <el-tab-pane name="2">
        <span slot="label"><i class="el-icon-user"></i> 算子</span>
        <div class="borderSingle singlePadding">
          <h5>集结算子</h5>
          <el-form ref="form" :model="aggregateForm" label-width="80px" :inline="true">
            <el-form-item label="集结算子">
              <el-radio-group v-model="aggregateForm.operator">
                <el-radio v-for="item in operatorsShow" :key="item" :label="item" :value="item"  style="width:120px;height:30px;"></el-radio>
              </el-radio-group>
              <el-button type="primary" @click="showMore">more...</el-button>
              <!-- <div @click="showMore">>more...</div> -->

              <!-- style="width:10%;margin:5px 0" -->
              <!-- <el-select v-model="aggregateForm.operator" placeholder="选择集结算子">
                <el-option v-for="item in operators" :key="item" :label="item" :value="item"></el-option>
              </el-select> -->
            </el-form-item>
          </el-form>
        </div>
        <div class="singlePadding btnCenter"><el-button type="primary" @click="next">下一步</el-button></div>
      </el-tab-pane>

      <!-- 决策方法 -->
      <el-tab-pane name="3">
        <span slot="label"><i class="el-icon-user"></i>决策方法</span>
        <div class="borderSingle singlePadding">
          <h5>决策方法</h5>
          <el-form ref="form" :model="aggregateForm" label-width="80px" :inline="true">
            <el-form-item label="决策方法">
              <el-radio-group v-model="aggregateForm.operator">
                <el-radio v-for="item in decisions" :key="item" :label="item" :value="item" ></el-radio>
              </el-radio-group>
              <!-- <el-select v-model="aggregateForm.decision" placeholder="选择决策方法">
                <el-option v-for="item in decisions" :key="item" :label="item" :value="item"></el-option>
              </el-select> -->
            </el-form-item>
          </el-form>
        </div>
        <div class="singlePadding btnCenter"><el-button type="primary" @click="next">下一步</el-button></div>
      </el-tab-pane>

      <!-- 距离/贴近公式 -->
      <el-tab-pane name="4">
        <span slot="label"><i class="el-icon-user"></i>距离/贴近度</span>
        <div class="borderSingle singlePadding">
          <h5>距离/贴近度公式</h5>
          <el-form ref="form" :model="aggregateForm" label-width="85px" :inline="true">
            <el-form-item label="距离/贴近" style="margin-right:10%">
              <el-select v-model="aggregateForm.DisClo" placeholder="选择距离/贴近度公式">
                <el-option-group v-for="group in DisClos" :key="group.label" :label="group.label">
                  <el-option v-for="item in group.options" :key="item" :label="item" :value="item"></el-option>
                </el-option-group>
              </el-select>
            </el-form-item>
          </el-form>
        </div>
        <div class="singlePadding btnCenter"><el-button type="primary" @click="next">下一步</el-button></div>
      </el-tab-pane>

      <!-- 得分函数 -->
      <el-tab-pane name="5">
        <span slot="label"><i class="el-icon-user"></i>得分函数</span>
        <div class="borderSingle singlePadding">
          <h5>得分函数</h5>
          <el-form ref="form" :model="aggregateForm" label-width="85px" :inline="true">
            <el-form-item label="得分函数">
              <el-select v-model="aggregateForm.scoreFun" placeholder="选择得分函数">
                <el-option v-for="item in scoreFuns" :key="item" :label="item" :value="item"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </div>
        <div class="singlePadding btnCenter"><el-button type="primary" @click="next">下一步</el-button></div>
      </el-tab-pane>

      <!-- 参数设置 -->
      <el-tab-pane name="6">
        <span slot="label"><i class="el-icon-user"></i>参数设置</span>
        <div class="borderSingle singlePadding">
          <h5>参数设置</h5>
          <el-form ref="form" :model="aggregateForm" label-width="80px" :inline="true">
            <!-- q值范围 -->
            <el-form-item label="q值范围" style="margin-right:10%">
              <el-input style="width:160px" v-model="aggregateForm.QMin" placeholder="q值最小值"></el-input>
              <span>  ~  </span>
              <el-input style="width:160px" v-model="aggregateForm.QMax" placeholder="q值最大值"></el-input>
            </el-form-item>
            <!-- 其他参数 -->
            <el-form-item label="其他参数">
              <el-input v-model="aggregateForm.otherParameter" placeholder="空格作为参数见的间隔"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div class="singlePadding btnCenter"><el-button type="primary" @click="next">下一步</el-button></div>
      </el-tab-pane>

      <!-- 专家权重/属性权重 -->
      <el-tab-pane name="7">
        <span slot="label"><i class="el-icon-user"></i>专家权重/属性权重</span>
        <div class="borderSingle singlePadding">
          <h5>专家权重/属性权重</h5>
          <div style="display: flex;">
            <!-- 专家权重 -->
            <el-form ref="form" :model="aggregateForm" label-width="80px" style="margin-right:10%;width:330px;">
              <el-form-item label="专家权重">
                <el-radio-group v-model="radio2" size="medium">
                  <el-radio-button label="选择方法"></el-radio-button>
                  <el-radio-button label="手动输入"></el-radio-button>
                </el-radio-group>
              </el-form-item>
              <el-form-item label=" " >
                <el-input
                  v-if="radio2 == '手动输入'"
                  style="width:300px;"
                  type="textarea" :autosize="{ minRows: 5, maxRows: 5}" :placeholder='demoExpertWeight'
                  v-model="aggregateForm.expertWeight">
                </el-input>
                <el-select 
                  v-if="radio2 == '选择方法'" 
                  placeholder="选择专家权重方法"
                  v-model="aggregateForm.expertWeight">
                  <el-option v-for="item in expertWeightMethods" :key="item" :label="item" :value="item"></el-option>
                </el-select>
              </el-form-item>
            </el-form>

            <!-- 属性权重 -->
            <el-form ref="form" :model="aggregateForm" label-width="80px" style="margin-right:10%;width:330px;">
              <el-form-item label="属性权重">
                <el-radio-group v-model="radio3" size="medium">
                  <el-radio-button label="选择方法"></el-radio-button>
                  <el-radio-button label="手动输入"></el-radio-button>
                </el-radio-group>
              </el-form-item>
              <el-form-item  label=" " >
                <el-input
                  v-if="radio3 == '手动输入'"
                  style="width:300px;"
                  type="textarea" :autosize="{ minRows: 5, maxRows: 5}" :placeholder='demoAttributeWeight'
                  v-model="aggregateForm.attributeWeight">
                </el-input>
                <el-select
                  v-if="radio3 == '选择方法'" 
                  placeholder="选择专家权重方法"
                  v-model="aggregateForm.attributeWeight">
                  <el-option v-for="item in attributeWeightMethods" :key="item" :label="item" :value="item"></el-option>
                </el-select>
              </el-form-item>
            </el-form>
          </div>
        </div>
        <div class="singlePadding btnCenter"><el-button type="primary" @click="aggregate">开始集结</el-button></div>
      </el-tab-pane>

      <!-- 集结矩阵 -->
      <el-tab-pane name="8" :disabled="tabState">
        <span slot="label"><i class="el-icon-user"></i>集结矩阵</span>
        <div class="borderSingle singlePadding">
          <h5>集结矩阵</h5>
          <el-table :data="aggregationMatrix" max-height="60vh">
            <el-table-column fixed type="index" ></el-table-column>
            <el-table-column 
              class="oneLine" 
              v-for="i in Object.keys(aggregationMatrix[0]).length" :key="i" :prop="'X'+i" :label="'X'+i" 
              show-overflow-tooltip width="150">
              <template slot-scope="scope">
                <span>{{ scope.row['X' + i]}}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="singlePadding btnCenter"><el-button type="primary" @click="next">下一步</el-button></div>
      </el-tab-pane>

      <!-- 最后得分/得分排序 -->
      <el-tab-pane name="9" :disabled="tabState">
        <span slot="label"><i class="el-icon-user"></i>最后得分</span>
        <!-- 最后得分 -->
        <div class="borderSingle singlePadding" >
          <h5>最后得分</h5>
          <el-table :data="finalScore" height="300" max-height="300">
            <el-table-column v-if="tabsName == '9'" fixed type="index" :index="Number(aggregateForm.QMin)"></el-table-column>
            <el-table-column 
              class="oneLine"
              v-for="i in Object.keys(finalScore[0]).length" :key="i" :prop="'X'+i" :label="'X'+i" 
              show-overflow-tooltip width="150">
              <template slot-scope="scope">
                <span>{{ scope.row['X' + i]}}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <!-- 得分排序 -->
        <div class="borderSingle  singlePadding" >
          <h5>得分排序</h5>
          <el-table :data="finalScoreSort" height="300" max-height="300">
            <el-table-column v-if="tabsName == '9'" fixed type="index" :index="Number(aggregateForm.QMin)"></el-table-column>
            <el-table-column 
              class="oneLine"
              v-for="i in Object.keys(finalScoreSort[0]).length" :key="i" :prop="String(i)" :label="String(i)" 
              show-overflow-tooltip width="150">
              <template slot-scope="scope">
                <span>{{ scope.row[i - 1]}}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <div class="singlePadding btnCenter"><el-button type="primary" @click="next">下一步</el-button></div>
      </el-tab-pane>

      <!-- 图表展示 -->
      <el-tab-pane name="10" :disabled="tabState">
        <span slot="label"><i class="el-icon-user"></i>图表展示</span>
        <div class="borderSingle  singlePadding" >
          <h5>图表展示</h5>
          <LineChart v-if="this.tabsName == '10'" v-bind="{finalScore: finalScore, QMin: aggregateForm.QMin}" />
        </div>
      </el-tab-pane>

    </el-tabs>
  </div>
</template>

<script>
import LineChart from '../../components/lineChart.vue'
export default {
  data() {
    return {
      tabsName: "0",
      tabState: true,
      radio1: '手动输入数据',
			radio2: '选择方法',
			radio3: '选择方法',
			active: 0,
			aggregateForm: {
				excelName: '',	// 上传表格文件名
				importData: '',	// 手动输入数据
				operator: '',	// 算子
				decision: '', // 决策方法
				QMin: '',	// Q最小值
				QMax: '',	// Q最大值
				otherParameter: '', // 其他参数 通过空格区分
				scoreFun: '', // 得分函数
				expertWeight: '',	// 专家权重
				attributeWeight: '',	// 属性权重
			},
      //算子
			operators: ['APs-WA','Bonferroni','DWA', 'Dubois and Prade', 'Drastic', 'Einstein','Frank', 'Hamacher', 'Heronian', 'Harmonic Mean','NA', 'OWA', 'OGA','PA',
      'PBM', 'PtA','Sugeno','Schweizer-Sklar','WA','WGA','Yager','Weber','WEA','WFA'],
      operatorsShow: ['APs-WA','Bonferroni','DWA', 'Dubois and Prade', 'Drastic', 'Einstein','Frank', 'Hamacher', 'Heronian', 'Harmonic Mean'],
			//决策方法
      decisions: ['ARAS', 'COPRAS', 'CRITIC', 'DEAS', 'EXPROM', 'MABAC', 'MACBRTH', 'MAUT', 'MOORA', 'TOPSIS'],
			DisClos: [{
				label: '距离公式',
				options: ['距离公式1', '距离公式2', '距离公式3', '距离公式4'],
			},{
				label: '贴进度公式',
				options: ['贴进度公式1', '贴进度公式2', '贴进度公式3', '贴进度公式4'],
			}],
			scoreFuns: ['SX (Xu, 2007)', 'SL(Liu、Wang, 2020)', 'SNWC(Wang、Chen, 2018)', 'SGM(Gong、Ma, 2019)'],
			expertWeightMethods: ['EW1', 'EW2', 'EW3', 'EW4'],
			attributeWeightMethods: ['AW1', 'AW2', 'AW3', 'AW4'],
			demoExpertWeight: 
				"例：[[0.2,0.2,0.2,0.2,0.2],	\
				 		  [0.2,0.2,0.2,0.2,0.2],	\
				 			[0.2,0.2,0.2,0.2,0.2],	\
				 			[0.2,0.2,0.2,0.2,0.2],	\
				 			[0.2,0.2,0.2,0.2,0.2]]",
			demoAttributeWeight: '例：[0.2,0.2,0.2,0.2,0.2]',
      
			aggregationMatrix: [''],
			finalScore:[''],
      finalScoreSort:[''],
      ProcessIntroduction:[
        {label:'数据',content:'数据'},
        {label:'算子',content:'算子'},
        {label:'决策方法',content:'决策方法'},
        {label:'距离/贴进度公式',content:'距离/贴进度公式'},
        {label:'得分函数',content:'得分函数'},
        {label:'参数',content:'参数'},
        {label:'专家权重/属性权重',content:'专家权重/属性权重'},
        ],
    };
  },
  components:{
    LineChart
  },
	mounted() {
	
  },
	methods: {
    async aggregate(){
			let res = await this.sendAggregateRespose()
			if (res.data.msg != 'success') {
				this.$message.error(res.data.msg);
				return
			}
			// console.log(res);
			await this.renderData(res)
			if (res.data.msg == "success") {
        this.tabState = false
				this.next()
			}
		},
		async sendAggregateRespose(){
			return await this.$axios.get('http://127.0.0.1:8000/api/multipleAggregate?body=' + JSON.stringify(this.aggregateForm))
		},
		renderData(res){
			// console.log(res);
			
			// 集结矩阵
			this.aggregationMatrix = []
			let arr_x = res.data.aggregationMatrix.substring(3, res.data.aggregationMatrix.length - 2).split('], [(')
			for (let i = 0; i < arr_x.length; i++) {
				let aggregationObj = {}
				let arr_y = arr_x[i].substring(0, arr_x[i].length).split(', (')	
				for (let j = 0; j < arr_y.length; j++) {
					aggregationObj['X' + (j + 1)] = '(' + arr_y[j]
				}
				this.aggregationMatrix.push(aggregationObj)
			}
			// console.log('aggregationMatrix', this.aggregationMatrix);

			// 最终得分
			this.finalScore = []
			for (let i = 0; i < res.data.finalScore.length; i++) {
				let finalScoreObj = {}
				for (let j = 0; j < res.data.finalScore[0].length; j++) {
					finalScoreObj['X' + (j + 1)] = res.data.finalScore[i][j]
				}
				this.finalScore.push(finalScoreObj)
			}
			// console.log(this.finalScore);

      // 得分排序
      console.log(res.data.finalScore);
      this.finalScoreSort = []
			for (let i = 0; i < res.data.finalScore.length; i++) {
        let finalScoreSortArr = []
				let temp = res.data.finalScore[i].concat()
        temp.sort((a, b) => a - b)
				for (let j = 0; j < res.data.finalScore[0].length; j++) {
					finalScoreSortArr.push('X' +  (Number(res.data.finalScore[i].indexOf(temp[j])) + 1))
				}
				this.finalScoreSort.push(finalScoreSortArr)
			}
      // console.log(this.finalScoreSort);
		},

    showMore(){
      let oLen = this.operators.length
      let osLen = this.operatorsShow.length
      let len = oLen - osLen > 10 ? 10 : oLen - osLen

      for (let i = 0; i < len; i++) {
        console.log(osLen + i, this.operators[osLen + i]);
        this.operatorsShow.push(this.operators[osLen + i])
      }
      console.log(this.operatorsShow);
    },
    
    beforeUpload(file) {
      let hz = file.name.split(".")[1]
      if (hz != 'xlsx' && hz != 'xls') {
				this.$message.warning('请上传xlsx/xls格式的文件!')
        return false;
      }
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件`)
    },
		uploadSuccess(response, file, fileList) {
			// console.log(response)
			this.aggregateForm.excelName = response.excelName
		},
    uploadFalse(response, file, fileList) {
			// console.log(response);
      this.$message.error('excel文件上传失败!');
    },
    next(){
      this.tabsName = String(Number(this.tabsName) + 1)
    }
	}
}
</script>

<style>
.personalHome{
    width: 100%;
    height: 100%;
}
/* .el-form--inline .el-form-item__content{
  width:calc(100% - 10%)
} */
.el-upload-dragger{
	height: 117px;
	overflow: inherit;
}
.el-upload-dragger .el-icon-upload{
	margin: 10px 0 6px
}
h5 {
	padding: 10px 0 5px 10px;
	margin: 0;
}
.oneLine {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.borderSingle{
	border: 1px solid #ccc; 
	border-radius: 4px;
}
.singlePadding{
	margin: 10px 10%;
}
.btnCenter{
	display: flex;
	justify-content: center;
}
</style>